<template>
    <view class="content" v-if="isShow">
        <view class="bg"></view>
        
        <view class="title">
            <image src="../../static/icon/order.png" class="top-icon"></image>
            <view class="u-flex-1">
                运输路线：<text class="dest">{{data.line}}</text>
            </view>
        </view>
        
        <view class="box">
            <view class="route">
                <image src="../../static/icon/line.png" class="line"></image>
                <view class="route-r">
                    <view>
                        <view>始发地</view>
                        <view class="address">{{data.origin}}</view>
                    </view>
                    <view class="u-p-t-50">
                        <view>目的地</view>
                        <view class="address">{{data.destination}}</view>
                    </view>
                </view>
            </view>
            <view class="item">
                <view class="grey">装车地点</view>
                <view class="item-right">{{data.loading_site}}</view>
            </view>
            <view class="item">
                <view class="grey">发车日期</view>
                <view class="item-right">{{data.start_date}}</view>
            </view>
            <view class="item">
                <view class="grey">发车时间</view>
                <view class="item-right">{{data.start_time}}</view>
            </view>
        </view>
        
        <view class="box">
            <view class="work-title">收货方</view>
            <view class="item">
                <view class="grey">收货地址</view>
                <view class="item-right">{{data.address}}</view>
            </view>
            <view class="item">
                <view class="grey">联系人</view>
                <view class="item-right">{{data.recipient_contact}}</view>
            </view>
            <view class="item">
                <view class="grey">联系方式</view>
                <view class="item-right">{{data.recipient_phone}}</view>
            </view>
        </view>
        
        <view class="box">
            <view class="work-title">发货方</view>
            <view class="item">
                <view class="grey">发货方</view>
                <view class="item-right">{{data.shipper}}</view>
            </view>
            <view class="item">
                <view class="grey">联系人</view>
                <view class="item-right">{{data.shipper_contact}}</view>
            </view>
            <view class="item">
                <view class="grey">联系方式</view>
                <view class="item-right">{{data.shipper_phone}}</view>
            </view>
            <view class="item" v-if="data.remark">
                <view class="grey">地址备注</view>
                <view class="item-right">{{data.remark}}</view>
            </view>
        </view>
        
        <view class="list-title">发货明细</view>
        <view class="box" v-for="(item, index) in data.goods" :key="index">
            <view class="item">
                <view class="grey">货物类型</view>
                <view class="item-right">{{item.type}}</view>
            </view>
            <view class="item">
                <view class="grey">产品名称</view>
                <view class="item-right">{{item.goods}}</view>
            </view>
            <view class="item" v-if="item.brand">
                <view class="grey">品牌</view>
                <view class="item-right">{{item.brand}}</view>
            </view>
            <view class="item" v-if="item.packages">
                <view class="grey">包装</view>
                <view class="item-right">{{item.packages}}</view>
            </view>
            <view class="item" v-if="item.model">
                <view class="grey">型号</view>
                <view class="item-right">{{item.model}}</view>
            </view>
            <view class="item">
                <view class="grey">件数</view>
                <view class="item-right">{{item.num}}件</view>
            </view>
            <view class="item">
                <view class="grey">预估重量</view>
                <view class="item-right">{{item.estimate_weight}}斤</view>
            </view>
            <view class="price">
                <view>预估运费 <text class="price-num">{{item.estimate_freight}}</text>元</view>
            </view>
        </view>
        
        <view class="pt-box">
            <image src="../../static/icon/icon_02.png" class="icon-02"></image>
            <view class="u-flex-1">
                <text class="pt-t1">平台提示</text>
                <text class="pt-t2">实际件数/重量以卸货员核验结果为准，重量与费用的计算标准详见</text>
                <text class="pt-t3" @click="showFee = true">计费规则</text>
            </view>
        </view>
        
        <view class="box">
            <view class="item">
                <view class="grey">预计装货时间</view>
                <view class="item-right">{{ data.start_date + ' ' + data.loading_time}}</view>
            </view>
            <view class="item">
                <view class="grey">车厢位置</view>
                <view class="item-right">{{data.carriage}}</view>
            </view>
            <view class="item" v-if="data.goods_remark">
                <view class="grey">货物备注</view>
                <view class="item-right">{{data.goods_remark}}</view>
            </view>
        </view>
        
        <view class="box">
            <view class="item">
                <view class="u-flex">
                    <view class="l-icon">券</view>
                    <view class="grey">优惠券</view>
                </view>
                <view class="item-right2" @click="show = true">
                	<view>{{ DKmoney || '请选择' }}</view>
                    <!-- <input type="text" placeholder="请选择" class="inp" disabled> -->
                    <u-icon name="arrow-right" color="#979797" size="28" class="u-m-l-5"></u-icon>
                </view>
            </view>
            <view class="item">
                <view class="u-flex">
                    <view class="l-icon">折</view>
                    <view class="grey">活动优惠</view>
                </view>
                <view class="item-right tip">{{data.discount}}</view>
            </view>
        </view>
        
        <view class="footer">
            <view class="f-top">您本次线上下单预计优惠{{ totalMoney }}元</view>
            <view class="f-down">
                <view>
                    <view>
                        预估总价
                        <text class="f-price">￥<text class="f-price-num">{{ freight }}</text></text>
                    </view>
                    <view class="f-tip">
                        阅读并同意<text class="f-tip-t" @click="showPrivacy = true">《电子运单契约条款及隐私政策》</text>
                    </view>
                </view>
                <view class="f-btn" @click="$noMultipleClicks(doSubmit)">提交订单</view>
            </view>
        </view>
        
        <!-- 选择优惠券 -->
        <u-popup v-model="show" :round="true" mode="bottom" :closeable="true" width="750rpx" height="1000rpx" border-radius="14">
            <view class="pop-box-cou">
                <view class="pop-title">请选择优惠券</view>
                <view>
                    <scroll-view :scroll-y="true" style="height: 800rpx;">
                        <view>
                            <view class="pop-item" v-for="(item, index) in couponList" :key="index" @click="chooseCoupon(item)">
                                <image src="../../static/image/cbg1.png" class="cou-bg"></image>
                                <view class="item-cou">
                                    <view class="item-cou-l">
                                        <view>
                                            <text class="cou-num">{{item.money}}</text>
                                            <text>元</text>
                                        </view>
                                        <view>{{item.name}}</view>
                                    </view>
                                    <view class="item-cou-r">
                                        <view class="u-font-30 u-p-b-5 text-bold">{{item.coupon}}</view>
                                        <view class="cou-time">有效期: {{item.start_time}}至{{item.end_time}}</view>
                                    </view>
                                </view>
                            </view>
                            <view class="pop-cou-none" v-if="couponList&&couponList.length == 0">
                                <image src="../../static/icon/price_04.png" class="price-04"></image>
                                <view>暂无可用优惠券</view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
        </u-popup>
		
		<!-- 计费规则 -->
		<u-popup v-model="showFee" :round="true" mode="bottom" :closeable="true" width="750rpx" height="1000rpx" border-radius="14">
		    <view class="pop-box-cou">
		        <view class="pop-title">计费规则</view>
		        <view>
		            <scroll-view :scroll-y="true" style="height: 800rpx;">
		                <view>
		                    <u-parse :html="content"></u-parse>
		                </view>
		            </scroll-view>
		        </view>
		    </view>
		</u-popup>
		
		<!-- 电子运单契约条款及隐私政策 -->
		<u-popup v-model="showPrivacy" :round="true" mode="bottom" :closeable="true" width="750rpx" height="1000rpx" border-radius="14">
		    <view class="pop-box-cou">
		        <view class="pop-title">电子运单契约条款及隐私政策</view>
		        <view>
		            <scroll-view :scroll-y="true" style="height: 800rpx;">
		                <view>
		                    <u-parse :html="content2"></u-parse>
		                </view>
		            </scroll-view>
		        </view>
		    </view>
		</u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				noClick: true,//连点
				showPrivacy: false,//电子运单契约条款及隐私政策
				content2: '',//电子运单契约条款及隐私政策
				showFee: false,//计费规则
				content: '',//计费规则
                show: false,//优惠券
				isShow: false,
				data: {},
				couponList: [],
				DKmoney: 0,//优惠
				totalMoney: 0,//共优惠
				freight: 0,//运费
				order_id: '',
				// isAgain: '',//1是再来一单
            };
        },
        onLoad(option) {
            if (option.order_id) {
            	this.order_id = option.order_id
            	this.getData()
            }
			
			this.getRule()
			this.getRule2()
        },
        methods: {
			// 提交订单
            doSubmit() {
				let coupon_id =''
				if (this.couponList.length > 0) {
					this.couponList.forEach(cur => {
						if(cur.isSelect) {
							coupon_id = cur.id
						}
					})
				}
				
				this.$ajax('insert_order_third', {
				    user_token: this.$getSync('userToken'),
					order_id: this.order_id,//订单id
					coupon_id: coupon_id,//优惠券id
					pay_status: '',//发货端结算状态 1未结算 2已结算
					zero_amount: '',//发货端抹零金额 已结算可添加
					amount: '',//发货端运费 已结算可添加
				}).then(ret => {
				    if (ret.success == 1000) {
						let data = ret.detail
						
						uni.showModal({
							title: '通知',
							content: '运单结算待卸货管理员核对订单实际重量件数后，进入订单-待支付中结算支付',
						    showCancel: false,
							success: (res) => {
								if (res.confirm) {
									uni.navigateBack({
										delta: 3
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
				    } else {
				        this.$toast(ret.msg);
				    }
				});
            },
			
			// 选择优惠券
			chooseCoupon(item) {
				const nowStatu = item.isSelect
				this.couponList.forEach(ii => {
				    ii.isSelect = false
				})
				item.isSelect =! nowStatu
				
				this.DKmoney = item.money //优惠
				// this.totalMoney = Number(this.data.discount_amount) + Number(item.money) //共优惠
				// this.freight = Number(this.data.amount) - Number(item.money) //运费
				this.totalMoney = 0
				if (this.data.discount_rate) {
					this.freight = ((Number(this.data.freight) - Number(item.money)) * this.data.discount_rate).toFixed(2)
					this.totalMoney = (Number(this.data.freight) - Number(this.freight)).toFixed(2)
				} else {
					this.freight = (Number(this.data.freight) - Number(item.money)).toFixed(2)
					this.totalMoney = item.money
				}
				
				this.show = false
			},
			
			// 获取订单详情
			getData() {
			    this.$ajax('orders_detail', {
					user_token: this.$getSync('userToken'),
					order_id: this.order_id,//订单id
				}).then(ret => {
			        if (ret.success == 1000) {
						this.data = ret.detail
						// this.totalMoney = this.data.discount_amount
						// this.freight = this.data.amount
						
						// 折扣金额 = 运费-(运费-优惠券)*折扣
						if (this.data.discount_rate && this.data.coupon > 0) {
							this.totalMoney = (this.data.freight - ((this.data.freight - this.data.coupon) * this.data.discount_rate)).toFixed(2)
						} else if (this.data.discount_rate && this.data.coupon <= 0) {
							this.totalMoney = (this.data.freight - (this.data.freight * this.data.discount_rate)).toFixed(2)
						}
						
						this.freight = Number(this.data.freight) - Number(this.totalMoney)
						
						this.isShow = true
						this.getCoupon(this.data.freight, this.data.line_id)
			        } else {
			            this.$toast(ret.msg);
			        }
			    });
			},
			
			// 获取优惠券
			getCoupon(money, line_id) {
			    this.$ajax('user_coupon', {
			        user_token: this.$getSync('userToken'),
					status: 1,//0未领取 1待使用 2已使用 3已过期
					money: money,//满足使用条件金额
					line_id: line_id,//满足使用条件线路id
					page: 1,
					limit: 999,
			    }).then(ret => {
			        if (ret.success == 1000) {
						this.couponList = ret.detail.coupon
						if (this.couponList.length > 0) {
							this.couponList.forEach(cur => {
								this.$set(cur, 'isSelect', false)
							})
						}
			        } else {
			            this.$toast(ret.msg);
			        }
			    });
			},
			
			
			getRule() {
			    this.$ajax('select_rules', {
			        user_token: this.$getSync('userToken'),
					type: 1,//1计算规则 2电子运单契约条款及隐私政策 3充值条款
			    }).then(ret => {
			        this.content = ret.detail.rules
			    });
			},
			getRule2() {
			    this.$ajax('select_rules', {
			        user_token: this.$getSync('userToken'),
					type: 2,//1计算规则 2电子运单契约条款及隐私政策 3充值条款
			    }).then(ret => {
			        this.content2 = ret.detail.rules
			    });
			},
        }
    };
</script>

<style lang="scss">
    
    page{
        background-color: #f2f4fa;
    }
    .content {
    	padding: 30rpx 20rpx 90px;
    }
    .bg {
    	width: 100%;
    	height: 600rpx;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: -1;
        background: linear-gradient(to bottom, #004580,#18568c, #f2f4fa);
    }
    .title{
        padding: 10rpx 0 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 36rpx;
        color: #fff;
    }
    .top-icon{
        width: 69rpx;
        height: 69rpx;
        margin-right: 20rpx;
    }
    .dest{
        font-weight: bold;
    }
    
    .box{
        padding: 20rpx 30rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 16rpx;
    }
    .route{
        padding: 10rpx 0 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .line{
        width: 31rpx;
        height: 162rpx;
        margin-right: 15rpx;
    }
    .route-r{
        flex: 1;
        font-size: 34rpx;
        font-weight: bold;
    }
    .address{
        font-size: 28rpx;
        color: #999999;
        font-weight: normal;
    }
    
    .work-title{
        font-size: 32rpx;
        font-weight: bold;
        padding-top: 10rpx;
        padding-bottom: 15rpx;
    }
    .item{
        padding: 15rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .item-right{
        flex: 1;
        text-align: right;
        font-weight: bold;
        padding-left: 30rpx;
    }
    .grey{
        color: #656565;
    }
    .list-title{
        font-size: 34rpx;
        color: #fff;
        background: linear-gradient(to right, #7fb1e4, #c7e1f9);
        border-radius: 20rpx;
        padding: 15rpx 30rpx;
        height: 120rpx;
        margin-bottom: -40rpx;
    }
    .price{
        padding: 25rpx 0 10rpx;
        border-top: 2rpx solid #f4f4f4;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        font-size: 28rpx;
    }
    .price-num{
        font-size: 40rpx;
        font-weight: bold;
        padding-left: 10rpx;
        padding-right: 5rpx;
    }
    
    .pt-box{
        padding: 35rpx 30rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 16rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .icon-02{
        width: 55rpx;
        height: 55rpx;
        margin-right: 15rpx;
    }
    .pt-t1{
        font-size: 32rpx;
        font-weight: bold;
        padding-right: 20rpx;
    }
    .pt-t2{
        font-size: 22rpx;
        color: #929292;
    }
    .pt-t3{
        font-size: 22rpx;
        color: #ff5f2b;
    }
    
    .l-icon{
        width: 30rpx;
        height: 30rpx;
        background-color: #ff4926;
        border-radius: 10rpx;
        font-size: 20rpx;
        color: #fff;
        text-align: center;
        line-height: 30rpx;
        margin-right: 10rpx;
    }
    .item-right2{
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-left: 15rpx;
    }
    .inp{
        flex: 1;
        text-align: right;
    }
    .tip{
        color: #fe6a00;
        font-weight: normal;
    }
    
    
    .footer{
        width: 750rpx;
        height: 170rpx;
        background-color: #fff;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 9;
    }
    .f-top{
        height: 50rpx;
        background-color: #ddebfa;
        font-size: 25rpx;
        color: #0c89ea;
        line-height: 50rpx;
        text-align: right;
        padding-right: 35rpx;
    }
    .f-down{
        padding: 15rpx 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .f-price{
        color: #ff3f00;
        padding-left: 15rpx;
    }
    .f-price-num{
        font-size: 38rpx;
        font-weight: bold;
    }
    .f-tip{
        font-size: 22rpx;
        color: #656565;
        padding-top: 5rpx;
    }
    .f-tip-t{
        color: #000;
    }
    .f-btn{
        font-size: 28rpx;
        color: #fff;
        padding: 15rpx 35rpx;
        background-color: #00457f;
        border-radius: 50rpx;
    }
    
    
    // 优惠券
    .pop-box-cou{
        padding: 0 30rpx;
    }
    .pop-title{
        font-size: 34rpx;
        font-weight: bold;
        text-align: center;
        padding: 30rpx;
    }
    .pop-item{
        position: relative;
        margin-bottom: 20rpx;
    }
    .cou-bg{
        width: 694rpx;
        height: 176rpx;
    }
    .item-cou{
        width: 670rpx;
        height: 165rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        left: 10rpx;
        top: 0;
    }
    .item-cou-l{
		width: 180rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #ff602c;
    }
    .cou-num{
        font-size: 44rpx;
        font-weight: bold;
    }
    .item-cou-r{
        padding-left: 30rpx;
        padding-right: 15rpx;
        flex: 1;
    }
    .cou-time{
        font-size: 24rpx;
        color: #8b8b8b;
    }
    .pop-cou-none{
        font-size: 30rpx;
        color: #9b9b9b;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 100rpx;
    }
    .price-04{
        width: 92rpx;
        height: 79rpx;
        margin-bottom: 20rpx;
    }
    

</style>
